<script setup lang="ts">
import { computed, ref } from 'vue';
import ExperienceCardItem from './ExperienceCardItem.vue';
import { useResumeStore } from '@/stores/ResumeStore';
import { storeToRefs } from 'pinia';
import MyPaginate from './MyPaginate.vue';

const itemsPerPage = 3;
const currentPage = ref(1);
const resumeStore = useResumeStore();
const { resume } = storeToRefs(resumeStore);

import xzxz from '@/assets/img/company/xzxz.png';
import ponaco from '@/assets/img/company/ponaco.png';

const experience = ref([
  {
    job: '贵州先知科技有限公司',
    company: '前端开发、移动端开发、产品经理',
    companyLogo: xzxz,
    location: 'New York',
    workType: 'Fulltime',
    start: '2023-04',
    end: '至今',
    description:
      '在此期间，独立负责App端业务、负责多个核心业务的前端开发、产品设计、数据库设计等工作。参与项目核心管理，负责产品需求调研、产品设计。',
  },
  {
    job: '贵州博纳康环保科技有限公司',
    company: '前端开发',
    companyLogo: ponaco,
    location: 'New York',
    workType: 'Fulltime',
    start: '2022-04',
    end: '2023-01',
    description:
      '在此期间，主导前端团队的工作，负责实现前端团队代码规范设计、通用开发框架搭建、技术选型等。实现多个项目高校、完整交付。',
  },
  {
    job: '贵州先知科技有限公司',
    company: '前端开发',
    companyLogo: xzxz,
    location: 'New York',
    workType: 'Fulltime',
    start: '2021-04',
    end: '2022-03',
    description:
      '在此期间，担任前端团队的核心成员，负责实现高性能、用户友好的Web应用界面。从需求分析到项目上线，全程参与产品开发周期，与产品、设计及后端团队紧密协作',
  },
]);

// pagination
const total = computed(() => {
  return experience.value.length;
});

const paginatedItems = computed(() => {
  const start = (currentPage.value - 1) * itemsPerPage;
  const end = start + itemsPerPage;
  return experience.value.slice(start, end);
});

function onPageChange(page: number) {
  currentPage.value = page;
}
</script>

<template>
  <div class="card">
    <h2 class="mb-4 text-lg font-semibold dark:text-night-50">{{ $t('experience') }}</h2>
    <ExperienceCardItem
      v-for="(item, index) in experience"
      :key="index"
      :item="item"
      :separator="paginatedItems.length > index + 1" />
    <!-- Paginate  -->
    <!-- <MyPaginate :totalItems="total" :itemsPerPage="itemsPerPage" :maxVisibleButtons="3" @pagechanged="onPageChange" /> -->
  </div>
</template>
